<template>
	<view class="schedule-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">课程安排</text>
			</view>
			<view class="header-right">
				<uni-icons type="plus" size="18" color="#fff" @tap="showAddModal"></uni-icons>
			</view>
		</view>

		<!-- 周选择器 -->
		<view class="week-selector">
			<view class="week-nav">
				<uni-icons type="left" size="16" color="#666" @tap="prevWeek"></uni-icons>
				<text class="week-text">第{{ currentWeek }}周</text>
				<uni-icons type="right" size="16" color="#666" @tap="nextWeek"></uni-icons>
			</view>
		</view>

		<!-- 课程表 -->
		<view class="schedule-table">
			<!-- 时间列 -->
			<view class="time-column">
				<view class="time-header">时间</view>
				<view 
					v-for="(timeSlot, index) in timeSlots" 
					:key="index" 
					class="time-slot"
				>
					<text class="time-text">{{ timeSlot }}</text>
				</view>
			</view>

			<!-- 课程网格 -->
			<view class="course-grid">
				<!-- 星期标题 -->
				<view class="week-header">
					<view 
						v-for="(day, index) in weekDays" 
						:key="index" 
						class="day-header"
					>
						<text class="day-text">{{ day }}</text>
					</view>
				</view>

				<!-- 课程内容 -->
				<view class="course-content">
					<view 
						v-for="(timeSlot, timeIndex) in timeSlots" 
						:key="timeIndex" 
						class="time-row"
					>
						<view 
							v-for="(day, dayIndex) in weekDays" 
							:key="dayIndex" 
							class="course-cell"
							@tap="showCourseDetail(getCourse(timeIndex, dayIndex))"
						>
							<view 
								v-if="getCourse(timeIndex, dayIndex)" 
								class="course-item"
								:class="getCourse(timeIndex, dayIndex).type"
							>
								<text class="course-name">{{ getCourse(timeIndex, dayIndex).name }}</text>
								<text class="course-location">{{ getCourse(timeIndex, dayIndex).location }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加课程弹窗 -->
		<view v-if="showAdd" class="modal-overlay" @tap="closeAddModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">添加课程</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeAddModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="input-group">
						<text class="input-label">课程名称</text>
						<input 
							class="input-field" 
							v-model="newCourse.name" 
							placeholder="请输入课程名称"
						/>
					</view>
					<view class="input-group">
						<text class="input-label">上课地点</text>
						<input 
							class="input-field" 
							v-model="newCourse.location" 
							placeholder="请输入上课地点"
						/>
					</view>
					<view class="input-group">
						<text class="input-label">星期</text>
						<picker 
							mode="selector" 
							:range="weekDays" 
							:value="newCourse.dayIndex" 
							@change="onDayChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ weekDays[newCourse.dayIndex] || '请选择星期' }}</text>
								<uni-icons type="down" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="input-group">
						<text class="input-label">时间段</text>
						<picker 
							mode="selector" 
							:range="timeSlots" 
							:value="newCourse.timeIndex" 
							@change="onTimeChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ timeSlots[newCourse.timeIndex] || '请选择时间段' }}</text>
								<uni-icons type="down" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="input-group">
						<text class="input-label">课程类型</text>
						<picker 
							mode="selector" 
							:range="courseTypes" 
							:value="newCourse.typeIndex" 
							@change="onTypeChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ courseTypes[newCourse.typeIndex] || '请选择课程类型' }}</text>
								<uni-icons type="down" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @tap="closeAddModal">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @tap="addCourse">
						<text class="btn-text">添加</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';

	// 当前周数
	const currentWeek = ref(1);

	// 时间段
	const timeSlots = ref([
		'08:00-09:40',
		'10:00-11:40',
		'14:00-15:40',
		'16:00-17:40',
		'19:00-20:40'
	]);

	// 星期
	const weekDays = ref(['周一', '周二', '周三', '周四', '周五']);

	// 课程类型
	const courseTypes = ref(['理论课', '实验课', '讨论课', '考试']);

	// 课程数据
	const courses = ref([
		{
			id: 1,
			name: '高等数学',
			location: '教学楼A101',
			dayIndex: 0, // 周一
			timeIndex: 0, // 第一节课
			type: 'theory',
			typeText: '理论课',
			teacher: '张教授'
		},
		{
			id: 2,
			name: '线性代数',
			location: '教学楼B203',
			dayIndex: 1, // 周二
			timeIndex: 1, // 第二节课
			type: 'theory',
			typeText: '理论课',
			teacher: '李老师'
		},
		{
			id: 3,
			name: '程序设计',
			location: '实验楼C301',
			dayIndex: 2, // 周三
			timeIndex: 2, // 第三节课
			type: 'lab',
			typeText: '实验课',
			teacher: '王老师'
		}
	]);

	// 添加课程相关
	const showAdd = ref(false);
	const newCourse = ref({
		name: '',
		location: '',
		dayIndex: 0,
		timeIndex: 0,
		typeIndex: 0
	});

	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				// 如果返回失败，跳转到班级页面
				uni.navigateTo({
					url: '/pages/class/class'
				});
			}
		});
	};

	// 上一周
	const prevWeek = () => {
		if (currentWeek.value > 1) {
			currentWeek.value--;
		}
	};

	// 下一周
	const nextWeek = () => {
		currentWeek.value++;
	};

	// 显示添加课程弹窗
	const showAddModal = () => {
		showAdd.value = true;
	};

	// 关闭添加课程弹窗
	const closeAddModal = () => {
		showAdd.value = false;
		newCourse.value = {
			name: '',
			location: '',
			dayIndex: 0,
			timeIndex: 0,
			typeIndex: 0
		};
	};

	// 星期选择
	const onDayChange = (e: any) => {
		newCourse.value.dayIndex = e.detail.value;
	};

	// 时间段选择
	const onTimeChange = (e: any) => {
		newCourse.value.timeIndex = e.detail.value;
	};

	// 课程类型选择
	const onTypeChange = (e: any) => {
		newCourse.value.typeIndex = e.detail.value;
	};

	// 添加课程
	const addCourse = () => {
		if (!newCourse.value.name.trim()) {
			uni.showToast({
				title: '请输入课程名称',
				icon: 'none'
			});
			return;
		}

		if (!newCourse.value.location.trim()) {
			uni.showToast({
				title: '请输入上课地点',
				icon: 'none'
			});
			return;
		}

		// 检查时间冲突
		const conflict = courses.value.find(course => 
			course.dayIndex === newCourse.value.dayIndex && 
			course.timeIndex === newCourse.value.timeIndex
		);

		if (conflict) {
			uni.showToast({
				title: '该时间段已有课程',
				icon: 'none'
			});
			return;
		}

		// 创建新课程
		const course = {
			id: courses.value.length + 1,
			name: newCourse.value.name,
			location: newCourse.value.location,
			dayIndex: newCourse.value.dayIndex,
			timeIndex: newCourse.value.timeIndex,
			type: getTypeClass(newCourse.value.typeIndex),
			typeText: courseTypes.value[newCourse.value.typeIndex],
			teacher: '我'
		};

		// 添加到列表
		courses.value.push(course);

		uni.showToast({
			title: '添加成功',
			icon: 'success'
		});

		closeAddModal();
	};

	// 获取课程类型样式类
	const getTypeClass = (typeIndex: number) => {
		switch (typeIndex) {
			case 0:
				return 'theory';
			case 1:
				return 'lab';
			case 2:
				return 'discussion';
			case 3:
				return 'exam';
			default:
				return 'theory';
		}
	};

	// 获取指定位置的课程
	const getCourse = (timeIndex: number, dayIndex: number) => {
		return courses.value.find(course => 
			course.timeIndex === timeIndex && course.dayIndex === dayIndex
		);
	};

	// 显示课程详情
	const showCourseDetail = (course: any) => {
		if (!course) return;

		uni.showModal({
			title: course.name,
			content: `地点：${course.location}\n时间：${timeSlots.value[course.timeIndex]}\n类型：${course.typeText}\n教师：${course.teacher}`,
			showCancel: false,
			confirmText: '确定'
		});
	};

	onMounted(() => {
		// 可以在这里加载课程数据
		// BACKEND REQUIRED: GET /api/class/{classId}/schedule
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.schedule-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #34C759, #30D158);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		padding: 10rpx;
	}

	/* 周选择器 */
	.week-selector {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.week-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40rpx;
	}

	.week-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	/* 课程表 */
	.schedule-table {
		display: flex;
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	/* 时间列 */
	.time-column {
		width: 120rpx;
		background: #f8f9fa;
		border-right: 1rpx solid #e0e0e0;
	}

	.time-header {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #007AFF;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}

	.time-slot {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.time-text {
		font-size: 20rpx;
		color: #666;
		text-align: center;
		line-height: 1.2;
	}

	/* 课程网格 */
	.course-grid {
		flex: 1;
	}

	.week-header {
		display: flex;
		background: #f8f9fa;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.day-header {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #e0e0e0;
	}

	.day-header:last-child {
		border-right: none;
	}

	.day-text {
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}

	.course-content {
		display: flex;
		flex-direction: column;
	}

	.time-row {
		display: flex;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.time-row:last-child {
		border-bottom: none;
	}

	.course-cell {
		flex: 1;
		height: 120rpx;
		border-right: 1rpx solid #e0e0e0;
		padding: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.course-cell:last-child {
		border-right: none;
	}

	.course-item {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		padding: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.course-item.theory {
		background: #e3f2fd;
		border: 1rpx solid #2196F3;
	}

	.course-item.lab {
		background: #f3e5f5;
		border: 1rpx solid #9C27B0;
	}

	.course-item.discussion {
		background: #e8f5e8;
		border: 1rpx solid #4CAF50;
	}

	.course-item.exam {
		background: #ffebee;
		border: 1rpx solid #f44336;
	}

	.course-name {
		font-size: 20rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 4rpx;
	}

	.course-location {
		font-size: 16rpx;
		color: #666;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.input-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
	}

	.picker-field {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	.modal-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		padding: 20rpx;
		border-radius: 8rpx;
		text-align: center;
	}

	.cancel-btn {
		background: #f0f0f0;
	}

	.confirm-btn {
		background: #34C759;
	}

	.btn-text {
		font-size: 28rpx;
		color: #333;
	}

	.confirm-btn .btn-text {
		color: #fff;
	}
</style>
